.page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("../../../assets/img/看板素材/背景组.jpg");
  background-size: cover; // 确保背景图片覆盖整个页面
  background-position: center; // 确保背景图片居中
  background-repeat: no-repeat; // 防止背景图片重复

  .header {
    width: 100%;
    height: auto;
    padding-top: 0.648vh;
    position: relative;

    .time{
      width: 100%;
      height: 2.0833vh;
      display: flex;
      justify-content: flex-end;
      padding:  1.39vh 1.5625vw 0 0;
      color: #23fffc;
      font-size: 1.5625vw;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    img {
      width: 100%; // 宽度铺满屏幕
      height: auto; // 高度自动调整，保持比例
      display: block; // 移除底部的空白间隙

    }
  }

  .body {
    flex-grow: 1;
    height: 0;
    width: 100%;
    padding: 0.78125vw;

    .body-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      gap: 0.78125vw;

      .left {
        width: 25%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 0.78125vw;

        .left-item {
          width: 100%;
          height: 50%;
          display: flex;
          flex-direction: column;
          gap: 0.78125vw;
          padding: 5.12375vh 0.78125vw 0.78125vw 0.78125vw;
          &.tip2{
            gap:.5vh;
            .left-item-tip{
              .tip-icon{
                .tip-icon-icon{
                  .tII-icon{
                    background-size: 70% auto!important;
                    background-image: url('../../../assets/img/看板素材/文字栏5圆.png')!important;
                  }
                }
              }
            }

          }
          span {
            border-radius: 5px;
            /* 添加圆角 */
            color: #dfeef3;
            /* 设置文字颜色 */
            font-size: 1.4815vh;
            /* 设置文字大小 */
          }

          &.top {
            background-image: url(../../../assets/img/看板素材/模块背景.png);
            background-size: 100% 100%; // 宽度铺满，高度自动调整
            background-position: center; // 确保背景图片居中
            background-repeat: no-repeat; // 防止背景图片重复
            position: relative;

            /* 确保子元素可以相对于这个容器定位 */
            .positioned-span {
              position: absolute;
              left: 2.08334vw;
              /* 定位到容器的底部 */
              top: 0.85vh;
              /* 定位到容器的右侧 */
              /* 你可以根据需要调整 top, bottom, left, right 的值 */
            }

            .left-item-tip {
              width: 100%;
              height: 7.41vh;
              display: flex;
              flex-direction: row;
              gap: 0.78125vw;
              .tip {
                width: 50%;
                height: 100%;
                display: flex;
                background-size: auto 100%;
                /* 调整背景图片的大小 */
                background-position: center;
                /* 确保背景图片居中 */
                background-repeat: no-repeat;
                /* 防止背景图片重复 */
                flex-direction: column;
                justify-content: center;
                align-items: center;

                &.tip1 {
                  background-image: url('../../../assets/img/看板素材/文字栏1.png');

                  .tip-number {
                    color: #23fffc;
                  }
                }

                &.tip2 {
                  background-image: url('../../../assets/img/看板素材/文字栏2.png');

                  .tip-number {
                    color: #23b9ff;
                  }
                }

                .tip-content {
                  width: 100%;
                  padding-left: 3.1248vw;

                  .tip-type {
                    font-size: 1.4815vh;
                    color: #ffffff;
                  }

                  .tip-number {
                    font-size: 1.666667vh;
                  }
                }
              }
              &.tip5{
                height: 6vh;
                .tip-icon .tip-icon-icon{
                  padding: 0px!important;
                }
              }
              &.tip3{
                width: 66%;
                margin: 0 auto;
                justify-content: center;
                .tip-icon{
                  width: 50%;
                }
              }
              .tip-icon {
                height: auto;
                width: 33%;
                display: flex;
                background-size: 100% auto;
                /* 调整背景图片的大小 */
                background-position: center;
                /* 确保背景图片居中 */
                background-repeat: no-repeat;
                /* 防止背景图片重复 */
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                gap: 0.417vw;
                background-image: url('../../../assets/img/看板素材/文本框.png');
                padding: 0.926vh 0 0.926vh 0;
                &.tip4{
                  background-image: none;

                }
                .tip-icon-icon{
                  width: 40%;
                  height: 100%;
                  padding: 0.3334vw;
                  .tII-icon{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-image: url('../../../assets/img/看板素材/文字栏6小方.png');
                    background-size: 100% auto;
                    background-position: center;
                    background-repeat: no-repeat;
                    font-size: 1.0412vw;
                    color:#23fffc;
                  }
                }
                .tip-icon-text{
                  width: 60%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: left;
                  flex-direction: column;
                  color:#ffffff;
                  .title{
                    font-size: 0.8333334vw;
                  }
                  .type{
                    font-size: 0.625vw;
                  }
                }

              }
            }

            .left-item-charts {
              width: 100%;
              height: calc(100% - 8.8vh);
              overflow: hidden;

              .inAndOutData {
                width: 100%;
                height: 100%;
                position: relative;
              }
            }

          }

        }
      }
      .mid {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.78125vw;

        .mid-top {
          width: 100%;
          height: 60%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 0.78125vw;

          .mid-top-title {
            width: 45vw;
            margin: 1.389vh auto 0 auto;
            height: 10%;
            margin-top: 1.389vh;
            gap: 1.302vw;
            display: flex;
            flex-direction: row;
            justify-content: space-between; // 子元素之间的间距均匀分布

            .mid-title-item {
              width: 33.33%;
              height: auto;
              font-size: 0.833vw;
              display: flex; // 使用 flex 布局
              align-items: center; // 垂直居中
              flex-direction: row;
              justify-content: space-around; // 水平居中
              text-align: center; // 文字居中

              &.first {
                background-image: url(../../../assets/img/看板素材/文字栏4绿色.png);
                background-size: 100%; // 宽度铺满，高度自动调整
                background-position: center; // 确保背景图片居中
                background-repeat: no-repeat; // 防止背景图片重复
                color: #23fffc; // 设置文字颜色，确保与背景图片有足够的对比度
              }

              &.second {
                background-image: url(../../../assets/img/看板素材/文字栏3蓝色.png);
                background-size: 100%; // 宽度铺满，高度自动调整
                background-position: center; // 确保背景图片居中
                background-repeat: no-repeat; // 防止背景图片重复
                color: #239aff;
              }

              &.third {
                background-image: url(../../../assets/img/看板素材/文字栏2黄色.png);
                background-size: 100%; // 宽度铺满，高度自动调整
                background-position: center; // 确保背景图片居中
                background-repeat: no-repeat; // 防止背景图片重复
                color: #fed52f;
              }
            }
          }

          .mid-content {
            position: relative;
            flex-grow: 1;
            height: 0;
            width: 93%;
            margin: 0 auto;
            background-image: url(../../../assets/img/看板素材/C.png);
            background-size: 100% 65%; // 宽度铺满，高度自动调整
            background-position: center; // 确保背景图片居中
            background-repeat: no-repeat; // 防止背景图片重复
            display: flex;
            flex-direction: row;
            justify-content: space-around; // 水平居中

            .mid-content-item {
              position: absolute;
              width: calc(1.3vw + 20%);
              height: 100%; // 高度占满父容器
              display: flex;
              flex-direction: column; // 垂直方向排列子元素
              align-items: center; // 水平居中
              text-align: center; // 文字居中

              .MIC-text {
                display: flex;
                flex-direction: column;
                align-items: center; // 水平居中
                justify-content: flex-start; // 垂直方向上靠上对齐
                width: 100%;

                .MCI-number {
                  font-size: 1.25vw;
                  color: #23fffc;
                }

                .MCI-title {
                  font-size: 0.833vw;
                  color: #ccd6d6;
                }

                .MCI-pom {
                  font-size: 0.729vw;
                  color: #ccd6d6;
                }
              }

              .MIC-iocn {
                position: absolute;
                /* 绝对定位 */
                top: 50%;
                /* 垂直居中 */
                left: 50%;
                /* 水平居中 */
                transform: translate(-50%, -50%);
                /* 将元素的中心点移动到容器的中心 */

                img {
                  width: 3.5vw;
                  height: auto;

                }
              }
            }

            .mid-content-item:nth-child(1) {
              left: calc(0.25vw);
            }

            .mid-content-item:nth-child(2) {
              left: calc(20% - 0.25vw);
            }

            .mid-content-item:nth-child(3) {
              left: calc(40% - 0.45vw);
            }

            .mid-content-item:nth-child(4) {
              left: calc(60% - 0.85vw);
            }

            .mid-content-item:nth-child(5) {
              left: calc(80% - 1.35vw);
            }
          }
        }


      }
    }
  }
}
:host ::ng-deep .devui-table thead tr th .title {
  color: #23fffc!important;
}
.mid-bot {
  width: 100%;
  height: 40%;
  background-image: url(../../../assets/img/看板素材/模块背景2.png);
  background-size: 100% 100%; // 宽度铺满，高度自动调整
  background-position: center; // 确保背景图片居中
  background-repeat: no-repeat; // 防止背景图片重复
  position: relative;
  padding: 5.12375vh 0.78125vw 0 0.78125vw;
  /* 确保子元素可以相对于这个容器定位 */
  &.right{
    height: 50%;
    overflow: hidden;
    background-image: url(../../../assets/img/看板素材/模块背景.png);
  }
  .positioned-span {
    position: absolute;
    left: 2.38334vw;
    /* 定位到容器的底部 */
    top: 0.85vh;
    /* 定位到容器的右侧 */
    /* 你可以根据需要调整 top, bottom, left, right 的值 */
    border-radius: 5px;
    /* 添加圆角 */
    color: #dfeef3;
    /* 设置文字颜色 */
    font-size: 1.4815vh;
    /* 设置文字大小 */
  }
  .mid-bot-table{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  .mid-bot-table{
    span {
      font-size: 1.3vh;
      color: #dfeef3;
    }
  }
}
